//
//  FlexDemoCtr.swift
//  soapp-docoment
//
//  Created by zhu xietong on 2022/12/30.
//

import Foundation
import soapp
import Eelay

class FlexDemoCtr:CellNodeController{
    let name = ASTextNode2()
    let avatar = JoImageNode()
    let age = ASTextNode2()
    let mobile = "18687510604".ui.font14.node
    let editBt = ASButtonNode()
    let cardBack = ASDisplayNode()
    override func viewDidLoad() {
        super.viewDidLoad()
        top_style = .orange
        top_style.navBarBgAlpha = 0.3
        title = "测试"
        name.attributedText = "老朱".ui.font14.astring
        avatar.img_url = __heads.one_str
        age.attributedText = "34".ui.font13.cl_666.astring
//        navigationController?.setNavigationBarHidden(false, animated: true)
        editBt.ui.nimage(UIImage(_snamed: "xz-add-icon"))
    }
    
    
    
    override func specGetter() -> _Spec {
        
        /** .stack 数组参数说
         
            《1》数组的第一项均为 h、v开头的简易字符   (该字符的解析逻辑在MiniFlexValue.swift 文件的 321 ～ 357 行)
                （1）h开头表示横向布局，v开头表示纵向布局
                （2）字符串中包含数字时表示的是轴向的布局间隔
                （3）字符串中包含的-、= 表示的是子组建轴向的对齐方式(FlexAlignItems 值)，-表示剧中对齐[center]，=表示拉升填充对齐[stretch]，简易字符只处理了-,= 的识别，如果需要更多对其方式请在stack 的数组参数中追加   &-.center    &-.flex_end   &-.baseline_first    &-.stretch     &-.flex_start    【&-.XXXXX   赋值的就是 FlexAlignItems 值】
                （3）字符串中包含的c,e,s,a,b 表示的是FlexJustifyContent 属性，分别表示的 是 center ,  end , start ,spaceAround,spaceBetween ，简易字符设置justifyContent 属性是2021年扩展的，项目种部分代码 也在 stack 数组参数追加 _justfy(v:FlexJustifyContent) 来设置justifyContent 属性, 例如 _justfy(.center) 就是给.stack 的 justifyContent 赋值居中

            《2》数组参数可添加高度【数字型字符串】，宽度【数字】，FlexAlignItems【&-. 开头的枚举类型】，FlexJustifyContent【_just(XXX)的结构体】， _grow(XX)【该stack 的延伸值】, _shrink(XX)【该stack的压缩值】 这几种的参数
         */
                    
        let val = 3
        let userContent:_Spec = .stack(["h-"], childs: [
            avatar["60",60],//60高度，60宽度
            3,//3的间隔（此处间隔只能是纯数字，不能包含加减乘除的运算，如果存在动态计算，请参照以下设置为6的间隔）
            "4",//4的间隔（此处间隔只能是纯数字的字符，不包含字符传的拼接转换，作用和使用数字是一样的）,
            .stack([(2 * val)], childs: []),//6的间隔
            .stack(["v=","<1>"], childs: [//v 表示纵轴布局，= 表示子内容轴向strech【拉伸】对齐
                .stack(["h-10b"], childs: [// h表示横轴布局，-表示子内容轴向center[居中]对齐，b表示的是justContent为space_between，10表示的是子布局项存在10 的间隔
                    name|,
                    age|
                ]),
                10,
                .stack(["h",&-.center], childs: [// h表示横轴布局，&-.center表示子内容轴向center[居中]对齐，
                    mobile|,
                    "<1>",//改字符会创建一个间隔, 是<1,1> 的简写,代码内的机制实质是创建了一个.stack 的布局结构，并在结构的数组参数中追加了_grow(1),_shrink(1) 这两个参数，该间隔设置了grow,shrink 属性第一个数字设置的是grow(可延伸值)为1，shrink(可压缩值)为1
                    editBt[14,"14"]
                ])
            ])
        ])
        
        return .inset([], [14], child: .stack(["v="], childs: [
            .inset([], [10,20], child: userContent).addBack(cardBack|)
        ]))
        
    }

}
